<template>
  <n-dropdown
    :show="dropdownVisible"
    :options="options"
    placement="bottom-start"
    :x="x"
    :y="y"
    @clickoutside="hide"
    @select="handleDropdown"
  />
</template>

<script setup lang="tsx">
import type { DropdownOption } from "naive-ui";
import { useAppStore, useTabStore } from "@/store";
import Fullscreen from "~icons/gridicons/fullscreen";
import Reload from "~icons/ant-design/reload-outlined";
import Close from "~icons/ant-design/close-outlined";
import CloseOther from "~icons/ant-design/column-width-outlined";
import ClozeLeft from "~icons/mdi/format-horizontal-align-left";
import ClozeRight from "~icons/mdi/format-horizontal-align-right";
import CloseAll from "~icons/ant-design/line-outlined";

interface Props {
  /** 右键菜单可见性 */
  visible?: boolean;
  /** 当前路由路径 */
  currentPath: string;
  /** 鼠标x坐标 */
  x: number;
  /** 鼠标y坐标 */
  y: number;
}
const props = withDefaults(defineProps<Props>(), {
  visible: false,
});

interface Emits {
  (e: "update:visible", visible: boolean): void;
}
const emit = defineEmits<Emits>();

const appStore = useAppStore();
const tabStore = useTabStore();

const dropdownVisible = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emit("update:visible", visible);
  },
});

const hide = () => {
  dropdownVisible.value = false;
};

const options = computed<DropdownOption[]>(() => [
  {
    label: "内容全屏",
    key: "full",
    icon: () => <Fullscreen />,
  },
  {
    label: "重新加载",
    key: "reload",
    disabled: props.currentPath !== tabStore.activeTabPath,
    icon: () => <Reload />,
  },
  {
    label: "关闭",
    key: "close",
    disabled: props.currentPath === tabStore.homeTab!.path,
    icon: () => <Close />,
  },
  {
    label: "关闭其他",
    key: "closeOther",
    icon: () => <CloseOther />,
  },
  {
    label: "关闭左侧",
    key: "closeLeft",
    icon: () => <ClozeLeft />,
  },
  {
    label: "关闭右侧",
    key: "closeRight",
    icon: () => <ClozeRight />,
  },
  {
    label: "关闭所有",
    key: "closeAll",
    icon: () => <CloseAll />,
  },
]);

const actionMap: { [key: string]: Function } = {
  full: () => appStore.setContentFull(true),
  reload: () => appStore.reloadPage(),
  close: () => tabStore.removeTab(props.currentPath),
  closeOther: () => tabStore.clearTab([props.currentPath]),
  closeLeft: () => tabStore.clearLeftTab(props.currentPath),
  closeRight: () => tabStore.clearRightTab(props.currentPath),
  closeAll: () => tabStore.clearTab(),
};

const handleDropdown = (optionKey: string) => {
  console.log("fdafwe");
  const actionFunc = actionMap[optionKey];
  console.log(actionFunc);

  if (actionFunc) {
    actionFunc();
  }
  hide();
};
</script>

<style scoped>
.div {
  box-sizing: unset;
}
</style>
